<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>FlowCss -FlexBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="redefining standard browser style standards" />
    <meta name="keywords" content="reset css, reset styles of browser, css reset"/>
    <meta name="robots" content="index, follow">
    <meta name="author" content="AlexDK">
    <link rel="stylesheet" href="../../../css/flowcss.css">
</head>
<body>
  <section class="container py-30">
    <h2 class="mb-30">Display flex</h2>
    <div class="m-30 py-20 bg-dark-7 flex">
      <div class="py-20 text-center color-white bg-yellow-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-yellow-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-yellow-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Flex row</h2>
    <div class="m-30 py-20 bg-dark-7 flex flex-row">
      <div class="py-20 text-center color-white bg-red-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-red-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-red-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Flex row reverse</h2>
    <div class="m-30 py-20 bg-dark-7 flex flex-row-reverse">
      <div class="py-20 text-center color-white bg-red-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-red-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-red-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Flex column</h2>
    <div class="m-30 py-20 bg-dark-7 flex flex-column">
      <div class="py-20 text-center color-white bg-pink-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-pink-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-pink-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Flex column reverse</h2>
    <div class="m-30 py-20 bg-dark-7 flex flex-column-reverse">
      <div class="py-20 text-center color-white bg-pink-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-pink-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-pink-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Justify content start</h2>
    <div class="m-30 py-20 bg-dark-7 flex justify-ct-start">
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Justify content end</h2>
    <div class="m-30 py-20 bg-dark-7 flex justify-ct-end">
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Justify content between</h2>
    <div class="m-30 py-20 bg-dark-7 flex justify-ct-between">
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Justify content evenly</h2>
   <div class="m-30 py-20 bg-dark-7 flex justify-ct-evenly">
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Justify content around</h2>
    <div class="m-30 py-20 bg-dark-7 flex justify-ct-around">
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Justify content center</h2>
    <div class="m-30 py-20 bg-dark-7 flex justify-ct-center">
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-blue-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align items start</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex align-its-start">
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align items end</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex align-its-end">
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align items center</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex align-its-center">
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align items stretch</h2>
    <div class=" height-test m-30 py-20 bg-dark-7 flex align-its-stretch">
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align items baseline</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex align-its-baseline">
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-green-5">Its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align self start</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex">
      <div class="py-20 text-center color-white bg-violet-5 align-sf-start">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-violet-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-violet-5 align-sf-start">its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align self end</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex align-sf-end">
      <div class="py-20 text-center color-white bg-violet-5 align-sf-end">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-violet-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-violet-5 align-sf-end">its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align self center</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex">
      <div class="py-20 text-center color-white bg-violet-5 align-sf-center">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-violet-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-violet-5 align-sf-center">its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align self stretch</h2>
    <div class=" height-test m-30 py-20 bg-dark-7 flex ">
      <div class="py-20 text-center color-white bg-violet-5 align-sf-stretch">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-violet-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-violet-5 align-sf-stretch">its is a flex item 3</div>
    </div>

    <h2 class="mb-30">Align self baseline</h2>
    <div class="height-test m-30 py-20 bg-dark-7 flex">
      <div class="py-20 text-center color-white bg-violet-5 align-sf-baseline">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-violet-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-violet-5 align-sf-baseline">its is a flex item 3</div>
    </div>

  <h2 class="mb-30">Align content start</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex align-ct-start">
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 6</div>
    </div>

    <h2 class="mb-30">Align content end</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex align-ct-end">
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 6</div>
    </div>

    <h2 class="mb-30">Align content center</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex align-ct-center">
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 6</div>
    </div>

    <h2 class="mb-30">Align content stretch</h2>
      <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex align-ct-stretch">
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 6</div>
    </div>

    <h2 class="mb-30">Align content between</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex align-ct-between">
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 6</div>
    </div>

    <h2 class="mb-30">Align content around</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex align-ct-around">
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 1</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 6</div>
    </div>

    <h2 class="mb-30">Flex grow</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex justify-ct-between">
      <div class="py-20 text-center color-white bg-pink-5 flex-grow-5">its is a flex item 1 flex-grow-5</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-pink-5">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-pink-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-pink-5 flex-grow-5">its is a flex item 6 flex-grow-5</div>
    </div>

    <h2 class="my-30">Flex shrink</h2>
    <div class="flex-wrap height-test m-30 py-20 bg-dark-7 flex justify-ct-between">
      <div class="py-20 text-center color-white bg-pink-5 flex-grow-2">its is a flex item 1 flex-grow-5</div>
      <div class="py-20 text-center color-white bg-orange-5 flex-shrink-1">its is a flex item 2</div>
      <div class="py-20 text-center color-white bg-pink-5 flex-shrink-2">its is a flex item 3</div>
      <div class="py-20 text-center color-white bg-pink-5">its is a flex item 4</div>
      <div class="py-20 text-center color-white bg-orange-5">its is a flex item 5</div>
      <div class="py-20 text-center color-white bg-pink-5 flex-grow-5">its is a flex item 6 flex-grow-5</div>
    </div>

    <h2 class="mb-30">Flex order</h2>
    <div class="flex-wrap m-30 py-20 bg-dark-7 flex justify-ct-evenly">
      <div class="order-3 py-20 text-center color-white bg-cyan-5">its is a flex item 1</div>
      <div class="order-2 py-20 text-center color-white bg-cyan-5">its is a flex item 2</div>
      <div class="order-1 py-20 text-center color-white bg-cyan-5">Its is a flex item 3</div>
    </div>
  </section>
</body>
</html>
